<template>
    <div style="margin-left: 20px;">
        <div class="picker" style="margin-top: 20px;">


            <div >
                <el-date-picker
            
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            >
            
          </el-date-picker>
            </div>
           
   <div class="right_btn">
    <!-- <el-button :type="type[0]" @click="toggleType(0)"   size="small" >新增客户数</el-button>
    <el-button :type="type[1]" @click="toggleType(1)"  size="small" >学科客户分布</el-button> -->
    <ul>
      <li  :class="{ active: activeIndex === 0 }" @click="handleMenuClick(0)"><a href="#" style="text-decoration: none;color: inherit; ">新增线索数量</a></li>
      <li :class="{ active: activeIndex === 1 }" @click="handleMenuClick(1)"><a href="#" style="text-decoration: none;color: inherit; ">线索转化率</a></li>
    </ul>

   </div>
        </div>
<div class="line_chart">
<div id="container1"  v-show="activeIndex === 0" >
</div>
<div id="container2" v-show="activeIndex === 1" >
</div>

</div>
</div>
<div  class="tabname_two"><h1>线索统计报表</h1>
<!-- <button class="btn">导出</button> -->
</div>
<!-- //==============================================导出以下table表格 -->
<div class="box2">
  <div class="inp">
  <el-form 
 
   :inline="true"
   :model="formInline" 
  label-position="top"
  style="display: flex; align-items: center;
 justify-content: space-between;
 background-image: linear-gradient(to left, rgba(205, 205, 205, 0.109), transparent), linear-gradient(to right, rgba(205, 205, 205, 0.089), transparent);
 border-radius: 40px;
"
  >
  <el-form-item label="线索编号">
    <el-input v-model="formInline.clueId" placeholder="请输入归属人" style="width: 100%"></el-input>
  </el-form-item>
   
    <el-form-item label="归属人">
    <el-input v-model="formInline.belonger" placeholder="请输入归属人" style="width: 100%"></el-input>
  </el-form-item>


<el-form-item label="归属部门">
    <el-select v-model="formInline.belongerSection" clearable placeholder="请选择归属部门" style="width: 100%">
      <el-option
      v-for="item in options"
      :key="item.belongerSection"
      :label="item.belongerSection"
      :value="item.belongerSection"
    />
    </el-select>

  </el-form-item>
  <el-form-item  label="&nbsp"  >
  <el-button type="primary" round  @click="onSubmit">搜索</el-button>
  <el-button type="info" round  @click="btnResetform">重置</el-button>
</el-form-item>
  </el-form>
</div>
 
<!-- ===================================================table -->
<el-table :data="customerTable" stripe>
  <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
 
    type="index"
    label="顺序"
    width="100px"
    
    align="center"
 >
  </el-table-column>
  <el-table-column
      prop="clueId"
      label="线索编号"
      align="center"
      width="180px"
   >
    </el-table-column>
  <el-table-column
      prop="phone"
      label="手机号"
      align="center"
      width="120px"
   >
    </el-table-column>
  <el-table-column
      prop="belongerSection"
      label="归属人部门"
      width="160px"
      align="center"
   >
    </el-table-column>
  <el-table-column
      prop="belonger"
      label="归属人"
      width="160px"
      align="center"
   >
    </el-table-column>
  <el-table-column
      prop="sourceChannel"
      label="渠道来源"
      align="center"
   >
    </el-table-column>
  <el-table-column
      prop="clueStatus"
      label="活动详情"
      width="120px"
      align="center"
   >
    </el-table-column>
    
  <el-table-column
      prop="businessStatus"
      label="线索状态"
      align="center"
   >
    </el-table-column>
    
  <el-table-column
      prop="creationTime"
      label="创建时间"
      align="center"
      width="180px"
      sortable
   >
    <template #default="{ row }">
          {{ formatTimestamp(row.creationTime) }}
        </template>
    </el-table-column>
  <el-table-column
      label="操作"
      align="center"
   >
   <el-button  type="text" >详情</el-button>
    </el-table-column>
   
</el-table>
<div class="block" >
<!-- //            ====分页======= -->
     <el-pagination
      :page-sizes="[10, 20, 30]"
      :current-page="queryParams.page"
      :small="small"
      layout="total, sizes, prev, pager, next, jumper"
      :total="queryParams.total"
      :background="false"
      @current-change="changePage"
      @size-change="changeSize"
     />
  </div>

</div>

       

</template>

<script setup>//=====================================================script===========================

// import Piecontainer_two from './Piecontainer_two.js'
import {ref,onMounted  } from "vue";
import dayjs from "dayjs";
import { Line,Funnel } from '@antv/g2plot';//导入饼图
const value1=ref('')
const activeIndex=ref(0)
const customerTable=ref([])//渲染table的数据
const formInline=ref({
  clueId:'',//线索编号
  belonger:"",//归属人
  belongerSection:''//归属部门
})
// const total=ref('')
const queryParams=ref({
  page: 1,
  pageSize: 10,
  total:''

})
const options =ref([ {
    value: '线上活动id',
    label: 'sourceChannel线上活动id',
  },
  {
    value: '学习部门id',
    label: 'departmentAffiliation学习部门id',
  },
  ])
import { getCluelist,getcluenew ,getclueconversion} from "@/api/count.js";

// 分页
const changeSize=async(val)=> {
console.log(val);
  queryParams.value.pageSize = val;
  queryParams.value.page = val;
await  getGenTableAPI();
}

const changePage=async(val)=> {
  console.log(val);
  queryParams.value.page = val;
 await getGenTableAPI();
}
// ================================  折线数据

//   //饼图数据
  const renderPieChart=()=>{
    const data = [
 
  { stage: '线索数4', number: 151 },
  { stage: '线索数3', number: 113 },
  { stage: '线索数2', number: 87 },
  { stage: '线索数1', number: 59 },
];
// const containerSelector = showContainer.value ? "#container1" : "#container2";
    const container = document.getElementById('container2');
    const funnelPlot = new Funnel(container, {
  data: data,
  xField: 'stage',
  yField: 'number',
  legend: false,
});


funnelPlot.render();
  }


const handleMenuClick=(index)=>{
  // console.log(index);
  activeIndex.value=index
    // const otherIndex = index === 0 ? 1 : 0 // 判断另一个按钮的索引
    //   const tempType = type.value[otherIndex] // 保存另一个按钮的类型
    //   type.value[otherIndex] = type.value[index] // 修改另一个按钮的类型
    //   type.value[index] = tempType // 修改当前按钮的类型

//  type.value[index] = type.value[index] === 'primary' ? 'default' : 'primary';
    // 其他逻辑...

    // showContainer.value = Boolean(index)// 如果 1 true 0 false
    // index===1?renderPieChart():0
}
//折线
const renderLineChart=()=>{
  fetch('https://gw.alipayobjects.com/os/bmw-prod/e00d52f4-2fa6-47ee-a0d7-105dd95bde20.json')
  .then((res) => res.json())
  .then((data) => {
const container = document.getElementById('container1');
    const linePlot = new Line(container, {
      data,
 
      xField: 'year',
      yField: 'gdp',
      seriesField: 'name',
      yAxis: {
        label: {
          formatter: (v) => `${(v / 10e8).toFixed(1)} B`,
        },
      },
     
      smooth: true,
      // 配置折线趋势填充
      area: {
        style: {
          fillOpacity: 0.15,
        },
      },
      animation: {
        appear: {
          animation: 'wave-in',
          duration: 3000,
        },
      },
    });

    linePlot.render();
  });
}
//                                            table获取搜索数据
const getGenTableAPI=async()=>{
const {data,total}= await getCluelist(queryParams.value)
console.log('拿到的线索数据',data);
customerTable.value=data
options.value=data
queryParams.value.total=total

}
const formatTimestamp = (timestamp) => {
  return dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss');
};
///重置按钮
const btnResetform=()=>{
  formInline.value={
    belonger:'',//归属人
    belongerSection:"",//所属部门
    clueId:''//线索编号
  
}
getGenTableAPI()
}
//搜索按钮
const onSubmit =async ()=>{
  console.log('搜索框里面内容',formInline.value);
 const {data} = await getCluelist(
{...queryParams.value,...formInline.value}
  )
  console.log('获取到的搜索数据',data);
  customerTable.value=data


}
onMounted(()=>{
  getGenTableAPI()//table获取搜索数据
  renderPieChart()//饼图
  renderLineChart()//折线
})

</script>
<style scoped lang="less">
.picker{
    display: flex;
    justify-content: space-between;
    .right_btn{
       width: 220px
       ;
       height: 40px;
       display: flex;
       justify-content: space-evenly;
        // margin-left: 70%;
        margin-right: 20px;
        border-radius: 5px;
        padding: 4px;
        border: 1px solid rgba(171, 168, 168, 0.052);
        background-color: #cdcdcd28;
        button{
          border: 1 solid red;
        }
        ul{
list-style-type: none;
display: flex;
padding-left: 0px;
margin-left: 2px;
li{
  margin-top: -4px;
  color: #aeb5c4;
  font-size: 14px;
  height: 32px;
  border-radius: 6px;
  padding: 0px 7px;
  font-family: PingFangSC,PingFangSC-Semibold;
  font-weight: 600;
  display: flex;
  width: 95px;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: all 0.2s ease-in-out;
}
        }
        .active{
          color: #05cc95;
          transition: all 0.5s ease-in-out;
          background-color: rgb(255, 255, 255);
          box-shadow: 0 6px 1px 0 rgba(0,0,0,.06);

        }
    }
}
.line_chart{
  display: flex;
  justify-content: center;

    margin-top: 20px;
    background-color: rgba(135, 207, 235, 0);
    width: 100%;
    height: 430px;
    #container1{
      width: 100%;
    }
#container2{
  width: 720px;
    height: 430px;
    // background-color: #78a721;
}
}
.tabname_two{
      height: 80px;
      background-color: rgb(255, 255, 255);
      display: flex;
      align-items: center;
      justify-content: space-between;
      
      .btn{
        background-color: rgb(253, 112, 100);
        border-radius: 40px;
        border: none;
        height: 40px;
        width: 100px;
        color: #ffffff;
        font-size: 17px;
        margin-right: 40px;
      }
    }
    .inp{
    
     margin-bottom: 10px;
      padding: 25px 56px 14px 17px;
  h3,h5{
   
    font-weight: 300;
  }
    }
    .block{
      display: flex;
      justify-content: center;
      padding: 2px 5px;
      margin-top:24px;
    }
    #container_two{
      width: 100%;
      height: 350px;
    }
    #container{
      width: 100%;
      height: 350px;
    }
</style>
<!-- 线索 -->